<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES9 正则扩展 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES9 正则扩展
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/10/23 16:25 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES7-11</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E5%88%86%E7%BB%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>命名捕获分组</h2>
<h3><a id="%E5%A3%B0%E6%98%8E%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>声明字符串</h3>
<pre class="line-numbers"><code class="language-js">//声明字符串
let str = '&lt;a href=&quot;https://www.baidu.com&quot;&gt;百度&lt;/a&gt;';
</code></pre>
<h3><a id="%E4%B8%8D%E4%BD%BF%E7%94%A8%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E5%88%86%E7%BB%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>不使用命名捕获分组</h3>
<p>使用普通的方法获取结果，返回的是一个数组</p>
<pre class="line-numbers"><code class="language-js">const reg = /&lt;a href=&quot;(.*)&quot;&gt;(.*)&lt;\/a&gt;/;

//执行
const result = reg.exec(str);
console.log(result);
//返回：['&lt;a href=&quot;https://www.baidu.com&quot;&gt;百度&lt;/a&gt;', 'https://www.baidu.com', '百度', groups: undefined]

console.log(result[1]); //输出：https://www.baidu.com
console.log(result[2]); //输出：百度
</code></pre>
<h3><a id="%E4%BD%BF%E7%94%A8%E5%91%BD%E5%90%8D%E6%8D%95%E8%8E%B7%E5%88%86%E7%BB%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>使用命名捕获分组</h3>
<p>返回结果与普通方法类似，但<code>groups</code>属性内会对捕获结果添加属性，方便提取</p>
<pre class="line-numbers"><code class="language-js">const reg = /&lt;a href=&quot;(?&lt;url&gt;.*)&quot;&gt;(?&lt;text&gt;.*)&lt;\/a&gt;/;

//执行
const result = reg.exec(str);
console.log(result);
//返回：['&lt;a href=&quot;https://www.baidu.com&quot;&gt;百度&lt;/a&gt;', 'https://www.baidu.com', '百度', groups: {…}]

console.log(result.groups.url); //输出：https://www.baidu.com
console.log(result.groups.text); //输出：百度
</code></pre>
<h2><a id="%E6%AD%A3%E5%88%99%E6%96%AD%E8%A8%80" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>正则断言</h2>
<h3><a id="%E5%A3%B0%E6%98%8E%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>声明字符串</h3>
<p>提取1919810</p>
<pre class="line-numbers"><code class="language-js">let str = '114514野兽先辈1919810昏睡红茶';
</code></pre>
<h3><a id="%E6%AD%A3%E5%90%91%E6%96%AD%E8%A8%80" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>正向断言</h3>
<p>根据后面的内容判断前面的内容是否合法</p>
<pre class="line-numbers"><code class="language-js">const reg = /\d+(?=昏)/g;

const result = reg.exec(str);

console.log(result); //输出：1919810
</code></pre>
<h3><a id="%E5%8F%8D%E5%90%91%E6%96%AD%E8%A8%80" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>反向断言</h3>
<p>根据前面的内容判断后面的内容是否合法</p>
<pre class="line-numbers"><code class="language-js">const reg = /(?&lt;=辈)\d+/g;

const result = reg.exec(str);

console.log(result); //输出：1919810
</code></pre>
<h2><a id="dotall%E6%A8%A1%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>dotAll模式</h2>
<p><code>dot</code>是正则表达式中的元字符<code>.</code></p>
<h3><a id="%E5%A3%B0%E6%98%8E%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>声明字符串</h3>
<pre class="line-numbers"><code class="language-js">let str = `
&lt;ul&gt;
    &lt;li&gt;
        &lt;a&gt;肖生克的救赎&lt;/a&gt;
        &lt;p&gt;上映日期：1994-09-18&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a&gt;阿甘正传&lt;/a&gt;
        &lt;p&gt;上映日期：1994-07-06&lt;/p&gt;
    &lt;/li&gt;
&lt; /ul&gt;
`;
</code></pre>
<h3><a id="%E9%9D%9Edotall%E6%A8%A1%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>非dotAll模式</h3>
<p>在默认情况下，<code>.</code>仅包含<strong>除换行符以外</strong>的任意单个字符</p>
<pre class="line-numbers"><code class="language-js">//声明正则
const reg = /&lt;li&gt;\s+&lt;a&gt;(.*)&lt;\/a&gt;\s+&lt;p&gt;(.*?)&lt;\/p&gt;/;

//执行匹配
const result = reg.exec(str);
console.log(result);
</code></pre>
<h3><a id="dotall%E6%A8%A1%E5%BC%8F" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>dotAll模式</h3>
<p>在<code>dotAll</code>模式下，<code>.</code>可以匹配<strong>包括换行符在内</strong>的任意单个字符</p>
<pre class="line-numbers"><code class="language-js">//声明正则
const reg = /&lt;li&gt;.*?&lt;a&gt;(.*?)&lt;\/a&gt;.*?&lt;p&gt;(.*?)&lt;\/p&gt;/s;

//执行匹配
const result = reg.exec(str);
console.log(result);
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>